<template>
   <div class="footer">
      <div class="text-delete">
        <input type="checkbox" />
        <span class="s4">全选</span>
        <span class="s5" @click="batchDelete">批量删除</span>
      </div>
      <div class="page">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
</template>

<script>
import Bus from '../../../utils/bus'
export default {
  props:['total'],
data(){
  return{
     currentPage1: 1,
  }
},
methods:{
 batchDelete() {//调用main里面的批量删除函数 
Bus.$emit("batchdelete")
 },
 handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$parent.pageSize = val //让父组件的属性值为子属性的属性值
      this.$parent.getData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$parent.page = val
      this.$parent.getData()
    },
},
}
</script>

<style lang="less"  scoped>
 .footer {
   box-sizing: border-box;
    width: 1220px;
    height: 70px;
    background-color: #fff;
    padding-top: 14px;
    padding-left: 50px;
    .text-delete {
      float: left;
      .s4 {
        color: #333;
        font-size: 14px;
        font-weight: 700;
        margin-right: 10px;
      }
      .s5 {
        font-size: 12px;
        color: #333;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .page {
      width: 496px;
      margin: auto;
      /deep/.el-pager li {
        font-size: 12px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border: 1px solid #b5b5b5;
        margin-right: 10px;
        min-width: 0;
      }
      /deep/.el-pager li.active {
        background-color: #409eff;
        color: #fff;
      }
      /deep/.btn-prev {
        width: 24px;
        height: 24px;
        border: 1px solid #b5b5b5;
        margin-right: 10px;
        min-width: 0;
      }
      /deep/.btn-next {
        width: 24px;
        height: 24px;
        border: 1px solid #b5b5b5;
        padding-left: 6px;
        min-width: 0;
      }
    }
  }
</style>